<script lang="ts" setup>
import ComparisonLossChart from './ComparisonLossChart.vue'

defineProps({
  isLoadingSignals: Boolean,
  leftTableData: Array,
  rightTableData: Array,
  chartData293: Object,
  chartData18: Object,
  chartDataCombinedHome: Object,
  chartDataCombinedDraw: Object,
  chartDataCombinedAway: Object
})
</script>

<template>
  <div v-loading="isLoadingSignals" class="flex-1 flex gap-2 overflow-auto w-full">
    <!-- 左侧区域 -->
    <div class="w-1/2 space-y-2">
      <div class="flex gap-2">
        <el-card shadow="never" class="flex-1 min-w-0">
          <div class="text-sm font-bold">威廉希尔赔率</div>
          <el-table :data="leftTableData" style="width: 100%" height="250" size="small">
            <el-table-column prop="oddsTime" label="时间" width="100" />
            <el-table-column prop="homeWin" label="主胜" width="50" />
            <el-table-column prop="draw" label="和" width="50" />
            <el-table-column prop="awayWin" label="客胜" width="50" />
            <el-table-column prop="homeWinRate" label="主胜率" width="60" />
            <el-table-column prop="drawRate" label="和率" width="60" />
            <el-table-column prop="awayWinRate" label="客胜率" width="60" />
            <el-table-column prop="signalHome" label="主队信号" width="70" />
            <el-table-column prop="signalDraw" label="平局信号" width="70" />
            <el-table-column prop="signalAway" label="客队信号" width="70" />
          </el-table>
        </el-card>

        <el-card shadow="never" class="flex-1 min-w-0">
          <div class="text-sm font-bold">必发赔率</div>
          <el-table :data="rightTableData" style="width: 100%" height="250" size="small">
            <el-table-column prop="oddsTime" label="时间" width="100" />
            <el-table-column prop="homeWin" label="主胜" width="50" />
            <el-table-column prop="draw" label="和" width="50" />
            <el-table-column prop="awayWin" label="客胜" width="50" />
            <el-table-column prop="homeWinRate" label="主胜率" width="60" />
            <el-table-column prop="drawRate" label="和率" width="60" />
            <el-table-column prop="awayWinRate" label="客胜率" width="60" />
            <el-table-column prop="signalHome" label="主队信号" width="70" />
            <el-table-column prop="signalDraw" label="平局信号" width="70" />
            <el-table-column prop="signalAway" label="客队信号" width="70" />
          </el-table>
        </el-card>
      </div>

      <div class="flex gap-2">
        <el-card shadow="never" class="flex-1 flex flex-col min-w-0">
          <div class="text-sm font-bold flex-shrink-0">威廉希尔RS值(胜平负)趋势图</div>
          <div class="flex-1 min-h-[300px] h-full">
            <ComparisonLossChart :chart-data="chartData293" :data-connect-config="{
    connectNulls: true,
    fillGaps: false,
    showSymbol: false
  }"
  :colors="['#ff4757', '#2ed573', '#ffa502']"
   chart-type="line" />
          </div>
        </el-card>

        <el-card shadow="never" class="flex-1 flex flex-col min-w-0">
          <div class="text-sm font-bold flex-shrink-0">必发RS值(胜平负)趋势图</div>
          <div class="flex-1 min-h-[300px] h-full">
            <ComparisonLossChart :chart-data="chartData18" 
            :data-connect-config="{
    connectNulls: true,
    fillGaps: false,
    showSymbol: false
  }"
  :colors="['#ff4757', '#2ed573', '#ffa502']"
   chart-type="line" />
          </div>
        </el-card>
      </div>
    </div>

    <!-- 右侧区域 -->
    <div class="w-1/2 space-y-2">
      <el-card shadow="never" class="flex flex-col">
        <div class="text-sm font-bold mb-1 flex-shrink-0">威廉希尔与必发RS值(胜)趋势图</div>
        <div class="h-[150px]">
          <ComparisonLossChart :chart-data="chartDataCombinedHome" 
          :data-connect-config="{
    connectNulls: true,
    fillGaps: false,
    showSymbol: false
  }"
          :colors="['#3742fa', '#ff4757']"
            chart-type="line" />
        </div>
      </el-card>

      <el-card shadow="never" class="flex flex-col">
        <div class="text-sm font-bold mb-1 flex-shrink-0">威廉希尔与必发RS值(平)趋势图</div>
        <div class="h-[150px]">
          <ComparisonLossChart :chart-data="chartDataCombinedDraw" 
          :data-connect-config="{
    connectNulls: true,
    fillGaps: false,
    showSymbol: false
  }" 
          :colors="['#3742fa', '#ff4757']"
          chart-type="line" />
        </div>
      </el-card>

      <el-card shadow="never" class="flex flex-col">
        <div class="text-sm font-bold mb-1 flex-shrink-0">威廉希尔与必发RS值(负)趋势图</div>
        <div class="h-[150px]">
          <ComparisonLossChart :chart-data="chartDataCombinedAway" :data-connect-config="{
    connectNulls: true,
    fillGaps: false,
    showSymbol: false
  }"
          :colors="['#3742fa', '#ff4757']"
          chart-type="line" />
        </div>
      </el-card>
    </div>
  </div>
</template>
